<template>
  <div class="notice">
    <div class="notice-tab" v-if="!emailContentOpened">
      <ZTab
        v-model:navs="navs"
        v-model:active="navsActive"
      />
    </div>
    <div class="notice-wrapper" v-loading="loading">
      <transition name="noticebox">
        <ul class="notice-box" v-show="!emailContentOpened">
          <li v-for="notice in filterToNotice()" :key="notice.emailId" class="notice-box-item" @click="openNoticeContent(notice)">
            <van-badge :dot="!notice.readStatus">
              <img :src="images.maillogo" alt="">
            </van-badge>
            <div class="notice-info">
              <div class="notice-info__title">{{ notice.name }}</div>
              <div class="notice-info__time">{{ parseTime(notice.createTime)}}</div>
            </div>
            <div class="notice-linker" v-if="notice.reward">
              <i-uiw-paper-clip /><span>{{t('mail.text003')}}</span><i-ep-arrow-right-bold />
            </div>
          </li>
        </ul>
      </transition>
      <transition name="noticecontent">
        <div class="notice-box" v-show="emailContentOpened">
          <div class="notice-box__header notice-box-item">
            <img :src="images.maillogo" alt="">
            <div class="notice-info">
              <div class="notice-info__title">{{ emailContent.name }}</div>
              <div class="notice-info__time">{{ parseTime(emailContent.createTime) }}</div>
            </div>
          </div>
          <div class="notice-box__content">
            <p>{{ emailContent.content }}</p>
            <div class="notice-box__content-footer" v-if="emailContent.reward">
              <i-uiw-paper-clip /><span>{{t('mail.text003')}}</span>：
              <img :src="splitForReward(emailContent.reward, 'pic')" alt=""> +{{ splitForReward(emailContent.reward, 'money') }}
            </div>
          </div>
          <div class="notice-box__tips"> If you have any questions kindly get in touch with our 24x7 customer service </div>
        </div>
      </transition>
      <div class="no-content-yet" v-if="filterNotices.length === 0">{{t('BetRecord.Nocontent')}}</div>
    </div>
    <div class="notice-buttons" :class="{'notice-opened': emailContentOpened}">
      <div class="notice-buttons-item notice-buttons__delete" v-if="!emailContentOpened" @click="deleNotice">{{t("notice.Deletes")}}</div>
      <div class="notice-buttons-item notice-buttons__onebyone" v-if="!emailContentOpened && navsActive !== 'read'" @click="onebyone">{{t('notice.text10')}}</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Notice">
import userinfoApi from '@/api/modules/userinfo';
import userinfo from '@/store/userinfo';
import system from '@/store/system';
import { parseTime } from '@/utils/format';

const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();
const emits = defineEmits(['openNoticeContent']);
const { t } = useI18n();

const global:any = getCurrentInstance()?.appContext.config.globalProperties;

const images: any = reactive({
  maillogo: new URL(`../../assets/images/header/maillogo.svg`, import.meta.url).href,
});

const data:any = reactive({
  filterNotices: [],
  notices: computed(()=>{
    let systemNotice = JSON.parse(JSON.stringify(piniaUserinfo.getNotice));
    systemNotice.forEach((element: any) => {
      if(element.platformType == 1){
        let data = JSON.parse(element.content)
        element.name = t('notice.System');
        switch (data.type) {
          case 1: {
            element.content = t("notice.text1") + data.currencyName + data.money + t("notice.text2")
              break;
          }
          case 2: {
            element.content = t("notice.text4") + data.currencyName + data.money + t("notice.text2")
          }
          case 3: {
            element.content = t("notice.text5") + data.currencyName + data.money + t("notice.text6")
          }
          case 4: {
            element.content = t("notice.text7") + data.name + t("notice.text8") + data.currencyName + data.money + t("notice.text6")
          }
        }
      }else{
        const currentLanContent = (element.lanContent || []).find((im:any)=> im.languageCode == piniaSystem.getLang.code) || {};
        const currentLanName = (element.lanName || []).find((im:any)=> im.languageCode == piniaSystem.getLang.code) || {};
        if(currentLanContent.content){
          element.content = currentLanContent.content;
        }
        if(currentLanName.content){
          element.name = currentLanName.content;
        }
      }
    });
    return systemNotice;
  }),
  loading: false,
  emailContent: {},
  emailContentOpened: false,
  navs: [
    {
      label: computed(()=>t('notice.text11')),
      active: 'all'
    },
    {
      label: computed(()=>t('notice.text12')),
      active: 'read'
    },
    {
      label: computed(()=>t('notice.text13')),
      active: 'unread'
    },
  ],
  navsActive: "all",
});

const {
  notices,
  loading,
  emailContent,
  emailContentOpened,
  navs,
  navsActive,
  filterNotices
} = toRefs(data);

// 过滤
const filterToNotice = () => {
  let filterList:any = [];
  if(navsActive.value === 'all'){
    filterList = notices.value;
  }else if(navsActive.value === 'read'){
    filterList = notices.value.filter((im:any)=>{
      return im.readStatus === 1;
    });
  }else if(navsActive.value === 'unread'){
    filterList = notices.value.filter((im:any)=>{
      return im.readStatus === 0;
    });
  }
  return filterList;
}

// 打开邮件
const openNoticeContent = (notice: any) => {
  emailContent.value = notice;
  emailContentOpened.value = true;
  emits('openNoticeContent', true);
  updateReadStatus(notice.noticeId);
}

// 更新已读状态
const updateReadStatus = (id?: string) => {
  let queryData = id ? {id: id} : {};
  userinfoApi.updateReadNoticeStatus(queryData).then((response:any)=>{
    if(response.code === 200){
      global.message(response.msg);
      // 查询邮件和消息的个数
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 依次领取
const onebyone = () => {
  updateReadStatus();
}

// 删除所有邮件
const deleNotice = () => {
  userinfoApi.deleNotice({}).then((response:any)=>{
    if(response.code === 200){
      global.message(response.msg);
      // 查询邮件和消息的个数
      piniaUserinfo.queryNoticeAndEmail();
    }
  });
}

// 切割
const splitForReward = (reward: any, type: string) => {
  if(!reward){
    return 0;
  }else{
    const arr = reward.split(',');
    if(type === 'money'){
      return arr[1];
    }else if(type === 'pic'){
      const walletMoney = piniaUserinfo.getWallet.find((im:any)=> im.currencyId == arr[0]);
      return walletMoney.currencyIcon;
    }
  }
}

// 关闭内容
const closeContent = () => {
  emailContentOpened.value = false;
}
defineExpose({
  closeContent
});
</script>

<style lang="scss" scoped>
@import url('./index.scss');
$timer: 0.7s;
.noticebox-enter-active {
  animation: bounceInLeft $timer;
}
.noticebox-leave-active {
  animation: bounceOutLeft $timer;
}
.noticecontent-enter-active {
  animation: bounceInRight $timer;
}
.noticecontent-leave-active {
  animation: bounceOutRight $timer;
}
</style>
